<template>
  <div>
    <!-- 新增人员弹出框 -->
    <div class="updatePwd" v-show="updatePopShow">
      <transition name="slide-fade">
        <div class="updatePwd-content" v-show="updatePopShow">
          <div class="up-content-title">
            <div>
              选择人员
            </div>
            <div @click="cancelClick">
              X
            </div>
          </div>
          <div class="up-content-main">
            <div class="transfer-left">
              <div class="transfer-title">
                选择：
              </div>
              <div class="transfer-main transfer-mainLeft">
                <div class="transfer-ml-search">
                  <div>
                    <div>
                      <img src="/static/img/搜索.png" alt="">
                    </div>
                    <div>
                      <input type="text" placeholder="请输入手机号或姓名" v-model="leftSearchVal">
                    </div>
                    <div v-show="searchValClearShow" @click="clear">
                      <img src="/static/img/清空.png" alt="">
                    </div>
                  </div>
                </div>
                <div v-show="searchListShow" class="transfer-ml-bread">
                  <div class="transfer-ml-breadMain">
                    <ul>
                      <li v-show="breadListsOvShow" class="breadMainLiBack">
                        <div @click="breadListsSelectOneClick">
                          «
                        </div>
                      </li>
                      <li :class="{breadMainLi:true,breadMainSeleteLi:isBreadMainSeleteLi == index}" :key="index" v-for="(item,index) in breadLists">
                        <div @click="breadListsClick(index)">{{item.name}}</div>
                        <div v-show="isBreadMainSeleteLi != index">></div>
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="transfer-ml-selectAll" v-show="transferPUserLLists.length > 0 && searchListShow">
                  <div class="transfer-ml-selectAllMain" @click="leftSelectAllClick">
                    <div>
                      <img v-if="transferselectAllShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                      <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                    </div>
                    <div>
                      全选
                    </div>
                  </div>
                </div>
                <div v-show="searchListShow" class="transfer-ml-list">
                  <ul>
                    <li class="transferMlListLi" :key="index" v-for="(item,index) in transferPDepitLLists">
                      <div class="transferMlListLiLeft">
                        <div class="trMlLiLiLeSlect">
                          <div>
                            <img src="/static/img/iconfont_page_personnel@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectTypeDept">
                          {{item.name}}
                        </div>
                      </div>
                      <div class="transferMlListLiRight">
                        <img @click="leftNextClick(index)" src="/static/img/下一级.png" alt="">
                        <div @click="leftNextClick(index)">下级</div>
                      </div>
                    </li>
                  </ul>
                  <ul>
                    <li class="transferMlListLi" :key="index" v-for="(item,index) in transferPUserLLists">
                      <div class="transferMlListLiLeft">
                        <div class="trMlLiLiLeSlect">
                          <div @click="transferPLListsSelectClick(index)">
                            <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                            <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectType" @click="transferPLListsSelectClick(index)">
                          <div class="trMlLiLiLeSlectTypeOne">
                            <img v-if="item.profile" :src="item.profile" alt="">
                            <div v-else>{{item.name | userNickFun}}</div>
                          </div>
                          <div>{{item.name}}</div>
                        </div>
                      </div>
                      <div class="transferMlListLiRight">
                      </div>
                    </li>
                  </ul>
                </div>
                <div v-show="!searchListShow" class="transfer-ml-searchList">
                  <ul>
                    <li class="transferMlListLi" v-show="transferPUserLLists.length > 0" :key="index" v-for="(item,index) in transferPUserLLists">
                      <div class="transferMlListLiLeft">
                        <div class="trMlLiLiLeSlect">
                          <div @click="transferPLListsSelectClick(index)">
                            <img v-if="item.show" src="/static/img/iconfont_xuanzhong@2x.png" alt="">
                            <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="">
                          </div>
                        </div>
                        <div class="trMlLiLiLeSlectType">
                          <div class="trMlLiLiLeSlectTypeOne">
                            <img v-if="item.profile" :src="item.profile" alt="">
                            <div v-else>{{item.name | userNickFun}}</div>
                          </div>
                          <div>{{item.name}}</div>
                        </div>
                      </div>
                      <div class="transferMlListLiRight">
                      </div>
                    </li>
                    <li class="transferMlListNullLi" v-show="transferPUserLLists.length == 0">
                      {{transferMlListNullLiTost}}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="transfer-right">
              <div class="transfer-title">
                已选：
              </div>
              <div class="transfer-main transfer-mainRight">
                <ul>
                  <li class="transferPRLi" :key="index" v-for="(item,index) in transferPRLists">
                    <div>
                      <div class="trMlLiLiLeSlectTypeOne">
                        <img v-if="item.profile" :src="item.profile" alt="">
                        <div v-else>{{item.name | userNickFun}}</div>
                      </div>
                      <div>{{item.name}}</div>
                    </div>
                    <div @click="righttransferPRListsClick(index)">
                      <img src="/static/img/清空.png" alt="">
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="up-content-but">
            <div></div>
            <div @click="affirmClick">
              保存
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  props: [
    "isupdatePop",
    "transferPDepitLListspop",
    "transferPUserLListspop",
    "userselectpop",
    "appID"
  ],
  data() {
    return {
      leftNextClickTrue: false,
      transferMlListNullLiTost: "",
      searchListShow: true,
      leftSearchVal: "", // 搜索
      searchValClearShow: false, // 搜索清空搜索清空
      breadListsOvShow: false, // 导航超过三个显示
      updatePopShow: false, // 人员选择列表
      transferPRLists: [], //选中人员列表
      transferPRListsCopyArr: [], // 选中人员备份数据-取消时使用
      isBreadMainSeleteBackShow: false, // 返回顶部
      transferselectAllShow: false, // 全选
      isBreadMainSeleteLi: 0, // 选中导航
      breadLists: [{ name: "通讯录" }], // 人员面包屑
      breadCopyLists: [{ name: "通讯录" }], // 人员面包屑监视数组
      transferPDepitLLists: [], // 成员未选中列表-部门
      transferPUserLLists: [] // 成员未选中列表-人员
    };
  },
  created: function() {},
  mounted: function() {},
  watch: {
    leftSearchVal(val) {
      var self = this;
      if (val.length > 0) {
        self.searchListShow = false;
        self.searchValClearShow = true;
        // 检索成员信息
        self
          .getmembermemberquery({
            companyId: sessionStorage.getItem("ORGID"),
            appId: sessionStorage.getItem("getAppid"),
            memberId: sessionStorage.getItem("memberId"),
            deptId: "",
            queryName: val
          })
          .then(data => {
            self.transferPUserLLists = [];
            self.transferPDepitLLists = [];
            if (data.statusCode == 200) {
              if (data.data) {
                var arr = [];
                data.data.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    deptIds: ele.deptIds,
                    deptNames: ele.deptNames,
                    memberId: ele.memberId,
                    profile: ele.profile,
                    mobile: ele.mobile,
                    name: ele.memberName,
                    passportId: ele.passportId,
                    show: false
                  });
                });
                self.transferPUserLLists = arr;
                self.transferMlListNullLiTost = "";
              } else {
                self.transferMlListNullLiTost = "暂无数据";
              }
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
              self.transferMlListNullLiTost = "暂无数据";
            }
          })
          .catch(msg => {
            self.transferPUserLLists = [];
            self.transferMlListNullLiTost = "暂无数据";
            self.transferPDepitLLists = [];
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      } else {
        self.searchListShow = true;
        self.searchValClearShow = false;
        self.breadLists = [
          {
            name: "通讯录",
            id: sessionStorage.getItem("ORGID")
          }
        ];
        self.breadCopyLists = [
          {
            name: "通讯录",
            id: sessionStorage.getItem("ORGID")
          }
        ];
        self.isBreadMainSeleteLi = 0;
        self
          .getbookapibookselectdepttree({
            appid: sessionStorage.getItem("getAppid"),
            memberId: sessionStorage.getItem("memberId"),
            deptId: sessionStorage.getItem("ORGID")
          })
          .then(data => {
            self.transferPUserLLists = [];
            self.transferPDepitLLists = [];
            if (data.statusCode == 200) {
              if (data.data) {
                if (data.data.deptList) {
                  var arr = [];
                  data.data.deptList.forEach(function(ele, ind) {
                    arr.push({
                      companyId: ele.companyId,
                      createTime: ele.createTime,
                      id: ele.id,
                      memberCount: ele.memberCount,
                      name: ele.name,
                      orgType: ele.orgType,
                      parentId: ele.parentId,
                      sortEmpty: ele.sortEmpty,
                      show: false
                    });
                  });
                  self.transferPDepitLLists = arr;
                }
                if (data.data.deptUserList) {
                  var arr = [];
                  data.data.deptUserList.forEach(function(ele, ind) {
                    arr.push({
                      companyId: ele.companyId,
                      deptIds: ele.deptIds,
                      deptNames: ele.deptNames,
                      memberId: ele.memberId,
                      profile: ele.profile,
                      mobile: ele.mobile,
                      name: ele.memberName,
                      passportId: ele.passportId,
                      show: false
                    });
                  });
                  self.transferPUserLLists = arr;
                }

                var leftPArr = [];
                var leftPSlectArr = [];
                self.transferPUserLLists.forEach(function(elel, indl) {
                  self.transferPRLists.forEach(function(eler, indr) {
                    if (eler.memberId == elel.memberId) {
                      leftPSlectArr.push(eler);
                      self.transferPUserLLists[indl].show = true;
                    }
                  });
                });

                if (leftPSlectArr.length == self.transferPUserLLists.length) {
                  self.transferselectAllShow = true;
                } else {
                  self.transferselectAllShow = false;
                }
              }
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.transferPUserLLists = [];
            self.transferPDepitLLists = [];
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    isupdatePop(val) {
      var self = this;
      self.transferselectAllShow = false;
      self.leftSearchVal = "";
      self.transferPDepitLLists = [];
      self.transferPUserLLists = [];
      self.transferPRLists = [];
      self.breadListsOvShow = false;
      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: sessionStorage.getItem("ORGID")
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                var arr = [];
                data.data.deptList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });
                self.transferPDepitLLists = arr;
              }
              if (data.data.deptUserList) {
                var arr = [];
                data.data.deptUserList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    deptIds: ele.deptIds,
                    deptNames: ele.deptNames,
                    memberId: ele.memberId,
                    profile: ele.profile,
                    mobile: ele.mobile,
                    name: ele.memberName,
                    passportId: ele.passportId,
                    show: false
                  });
                });
                self.transferPUserLLists = arr;
              }
              if (self.userselectpop.length > 0) {
                self.transferPRListsCopyArr = [];
                self.userselectpop.forEach(function(ele) {
                  self.transferPRListsCopyArr.push({
                    companyId: ele.companyId,
                    deptIds: ele.deptIds,
                    deptNames: ele.deptNames,
                    memberId: ele.memberId,
                    profile: ele.profile,
                    mobile: ele.mobile,
                    name: ele.name,
                    passportId: ele.passportId,
                    show: false
                  });
                });
                self.transferPRLists = self.userselectpop;

                self.updateListsFun();
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
      this.updatePopShow = val;
      self.breadLists = [
        {
          name: "通讯录",
          id: sessionStorage.getItem("ORGID")
        }
      ];
      self.breadCopyLists = [
        {
          name: "通讯录",
          id: sessionStorage.getItem("ORGID")
        }
      ];
      self.isBreadMainSeleteLi = 0;
    },
    transferPDepitLListspop(val) {
      var self = this;
      // this.transferPDepitLLists = val;
    },
    appID: {
      handler(val) {
        var self = this;
        console.log(val);
      },
      deep: true
    },
    transferPUserLListspop(val) {
      var self = this;
      // this.transferPUserLLists = val;
    }
  },
  methods: {
    //搜索清空
    clear() {
      this.leftSearchVal = "";
    },
    // 编辑时调用
    updateListsFun() {
      var self = this;
      var leftPSlectArr = [];
      self.transferPUserLLists.forEach(function(elel, indl) {
        self.transferPRLists.forEach(function(eler, indr) {
          if (eler.memberId == elel.memberId) {
            leftPSlectArr.push(eler);
            self.transferPUserLLists[indl].show = true;
          }
        });
      });
      if (leftPSlectArr.length == self.transferPUserLLists.length) {
        self.transferselectAllShow = true;
      } else {
        self.transferselectAllShow = false;
      }
    },
    // 人员确认
    affirmClick() {
      var self = this;
      this.updatePopShow = false;
      var prStr = [];
      this.$emit("affirm", self.transferPRLists);
    },
    // 人员取消
    cancelClick() {
      var self = this;
      this.updatePopShow = false;
      this.$emit("cancel", self.transferPRListsCopyArr);
    },
    // 左边点击返回第一层
    breadListsSelectOneClick() {
      var self = this;
      self.breadLists = [];
      self.breadCopyLists.splice(1, self.breadCopyLists.length);
      self.breadLists.unshift({
        name: self.breadCopyLists[0].name,
        id: self.breadCopyLists[0].id
      });
      self.isBreadMainSeleteLi = self.breadLists.length - 1;
      self.breadListsOvShow = false;

      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: self.breadCopyLists[0].id
        })
        .then(data => {
          self.transferPUserLLists = [];
          self.transferPDepitLLists = [];
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                var arr = [];
                data.data.deptList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });
                self.transferPDepitLLists = arr;
              }
              if (data.data.deptUserList) {
                var arr = [];
                data.data.deptUserList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    deptIds: ele.deptIds,
                    deptNames: ele.deptNames,
                    memberId: ele.memberId,
                    profile: ele.profile,
                    mobile: ele.mobile,
                    name: ele.memberName,
                    passportId: ele.passportId,
                    show: false
                  });
                });
                self.transferPUserLLists = arr;
              }
              var leftPArr = [];
              var leftPSlectArr = [];
              self.transferPUserLLists.forEach(function(elel, indl) {
                self.transferPRLists.forEach(function(eler, indr) {
                  if (eler.memberId == elel.memberId) {
                    leftPSlectArr.push(eler);
                    self.transferPUserLLists[indl].show = true;
                  }
                });
              });
              if (leftPSlectArr.length == self.transferPUserLLists.length) {
                self.transferselectAllShow = true;
              } else {
                self.transferselectAllShow = false;
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.transferPUserLLists = [];
          self.transferPDepitLLists = [];
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 左边点击导航
    breadListsClick(index) {
      var self = this;
      var indeName = self.breadLists[index].name;
      self
        .getbookapibookselectdepttree({
          appid: sessionStorage.getItem("getAppid"),
          memberId: sessionStorage.getItem("memberId"),
          deptId: self.breadLists[index].id
        })
        .then(data => {
          self.transferPUserLLists = [];
          self.transferPDepitLLists = [];
          if (data.statusCode == 200) {
            if (data.data) {
              if (data.data.deptList) {
                var arr = [];
                data.data.deptList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    createTime: ele.createTime,
                    id: ele.id,
                    memberCount: ele.memberCount,
                    name: ele.name,
                    orgType: ele.orgType,
                    parentId: ele.parentId,
                    sortEmpty: ele.sortEmpty,
                    show: false
                  });
                });
                self.transferPDepitLLists = arr;
              }
              if (data.data.deptUserList) {
                var arr = [];
                data.data.deptUserList.forEach(function(ele, ind) {
                  arr.push({
                    companyId: ele.companyId,
                    deptIds: ele.deptIds,
                    deptNames: ele.deptNames,
                    memberId: ele.memberId,
                    profile: ele.profile,
                    mobile: ele.mobile,
                    name: ele.memberName,
                    passportId: ele.passportId,
                    show: false
                  });
                });
                self.transferPUserLLists = arr;
              }

              if (self.breadCopyLists.length > 3) {
                self.breadLists = [];
                var selectIndex = 0;
                self.breadCopyLists.forEach(function(ele, ind) {
                  if (ele.name == indeName) {
                    selectIndex = ind;
                    self.breadLists.unshift({
                      name: self.breadCopyLists[ind].name,
                      id: self.breadCopyLists[ind].id
                    });
                    if (ind > 0) {
                      self.breadLists.unshift({
                        name: self.breadCopyLists[ind - 1].name,
                        id: self.breadCopyLists[ind - 1].id
                      });
                      selectIndex = ind;
                      if (ind > 1) {
                        self.breadLists.unshift({
                          name: self.breadCopyLists[ind - 2].name,
                          id: self.breadCopyLists[ind - 2].id
                        });
                        selectIndex = ind;
                      }
                    }
                  }
                });
                self.breadCopyLists.splice(
                  selectIndex + 1,
                  self.breadCopyLists.length
                );
                if (self.breadCopyLists.length > 3) {
                  self.breadListsOvShow = true;
                } else {
                  self.breadListsOvShow = false;
                }
              } else {
                self.breadLists = [];
                self.breadCopyLists.splice(
                  index + 1,
                  self.breadCopyLists.length
                );
                self.breadCopyLists.forEach(function(ele, ind) {
                  self.breadLists.push({
                    name: ele.name,
                    id: ele.id
                  });
                });
                self.breadListsOvShow = false;
              }
              self.isBreadMainSeleteLi = self.breadLists.length - 1;
              var leftPArr = [];
              var leftPSlectArr = [];
              self.transferPUserLLists.forEach(function(elel, indl) {
                self.transferPRLists.forEach(function(eler, indr) {
                  if (eler.memberId == elel.memberId) {
                    leftPSlectArr.push(eler);
                    self.transferPUserLLists[indl].show = true;
                  }
                });
              });
              if (leftPSlectArr.length == self.transferPUserLLists.length) {
                self.transferselectAllShow = true;
              } else {
                self.transferselectAllShow = false;
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.transferPUserLLists = [];
          self.transferPDepitLLists = [];
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 左边下一级
    leftNextClick(index) {
      var self = this;
      // 获取下一级导航变化
      if (self.leftNextClickTrue == false) {
        self.leftNextClickTrue = true;
        self.breadCopyLists.push({
          name: self.transferPDepitLLists[index].name,
          id: self.transferPDepitLLists[index].id
        });
        if (self.breadCopyLists.length < 4) {
          self.breadListsOvShow = false;
          self.breadLists.push({
            name: self.transferPDepitLLists[index].name,
            id: self.transferPDepitLLists[index].id
          });
        } else {
          self.breadListsOvShow = true;
          self.breadLists.shift();
          self.breadLists.push({
            name: self.transferPDepitLLists[index].name,
            id: self.transferPDepitLLists[index].id
          });
        }
        self.transferselectAllShow = false;
        self.isBreadMainSeleteLi = self.breadLists.length - 1;

        self
          .getbookapibookselectdepttree({
            memberId: sessionStorage.getItem("memberId"),
            deptId: self.transferPDepitLLists[index].id
          })
          .then(data => {
            self.leftNextClickTrue = false;
            self.transferPUserLLists = [];
            self.transferPDepitLLists = [];
            if (data.statusCode == 200) {
              if (data.data) {
                if (data.data.deptList) {
                  var arr = [];
                  data.data.deptList.forEach(function(ele, ind) {
                    arr.push({
                      companyId: ele.companyId,
                      createTime: ele.createTime,
                      id: ele.id,
                      memberCount: ele.memberCount,
                      name: ele.name,
                      orgType: ele.orgType,
                      parentId: ele.parentId,
                      sortEmpty: ele.sortEmpty,
                      show: false
                    });
                  });
                  self.transferPDepitLLists = arr;
                }
                if (data.data.deptUserList) {
                  var arr = [];
                  data.data.deptUserList.forEach(function(ele, ind) {
                    arr.push({
                      companyId: ele.companyId,
                      deptIds: ele.deptIds,
                      deptNames: ele.deptNames,
                      memberId: ele.memberId,
                      profile: ele.profile,
                      mobile: ele.mobile,
                      name: ele.memberName,
                      passportId: ele.passportId,
                      show: false
                    });
                  });
                  self.transferPUserLLists = arr;
                }
                var leftPSlectArr = [];
                self.transferPUserLLists.forEach(function(elel, indl) {
                  self.transferPRLists.forEach(function(eler, indr) {
                    if (eler.memberId == elel.memberId) {
                      leftPSlectArr.push(eler);
                      self.transferPUserLLists[indl].show = true;
                    }
                  });
                });
                if (leftPSlectArr.length == self.transferPUserLLists.length) {
                  self.transferselectAllShow = true;
                } else {
                  self.transferselectAllShow = false;
                }
              }
            } else {
              self.$message({
                type: "info",
                message: data.statusMessage
              });
            }
          })
          .catch(msg => {
            self.leftNextClickTrue = false;
            self.transferPUserLLists = [];
            self.transferPDepitLLists = [];
            self.$message({
              type: "info",
              message: "服务器异常"
            });
          });
      }
    },
    // 左边全选
    leftSelectAllClick() {
      var self = this;
      var leftPArr = [];
      var leftPSlectArr = [];
      self.transferselectAllShow = !self.transferselectAllShow;
      self.transferPUserLLists.forEach(function(elel, indl) {
        elel.show = self.transferselectAllShow;
        leftPArr.push(elel);
        self.transferPRLists.forEach(function(eler, indr) {
          if (elel.memberId == eler.memberId) {
            eler.show = self.transferselectAllShow;
          }
        });
        if (elel.show == true) {
          self.transferPRLists.push(elel);
          leftPSlectArr.push(elel);
        }
      });
      if (leftPSlectArr.length == leftPArr.length) {
        self.transferselectAllShow = true;
      } else {
        self.transferselectAllShow = false;
      }
      // 获取右边所有当前列表中包含的参数
      var indexArr = [];
      self.transferPRLists.forEach(function(ele, ind) {
        if (ele.show == false) {
          indexArr.push({ memberId: ele.memberId });
        }
      });
      // 数组去重
      var hash = {};
      self.transferPRLists = self.transferPRLists.reduce(function(item, next) {
        hash[next.memberId]
          ? ""
          : (hash[next.memberId] = true && item.push(next));
        return item;
      }, []);
      // 数组求差集
      var isNaN = Number.isNaN;
      self.transferPRLists = self.transferPRLists.reduce(function(previous, i) {
        var found = indexArr.findIndex(function(j) {
          return (
            j.memberId === i.memberId ||
            (isNaN(i.memberId) && isNaN(j.memberId))
          );
        });
        return found < 0 && previous.push(i), previous;
      }, []);
    },
    // 左边点击选中
    transferPLListsSelectClick(index) {
      var self = this;
      var leftPSlectArr = [];
      // 修改勾选
      self.transferPUserLLists[index].show = !self.transferPUserLLists[index]
        .show;
      // 当左边取消时，右边也跟随取消
      if (self.transferPUserLLists[index].show == false) {
        self.transferPRLists.forEach(function(ele, ind) {
          if (ele.memberId == self.transferPUserLLists[index].memberId) {
            self.transferPRLists[ind].show = false;
            self.transferPRLists.splice(ind, 1);
          }
        });
      }
      self.transferPUserLLists.forEach(function(ele, ind) {
        if (ele.show == true) {
          self.transferPRLists.push(ele);
          leftPSlectArr.push(ele);
        }
      });

      var hash = {};
      self.transferPRLists = self.transferPRLists.reduce(function(item, next) {
        hash[next.memberId]
          ? ""
          : (hash[next.memberId] = true && item.push(next));
        return item;
      }, []);
      if (leftPSlectArr.length == self.transferPUserLLists.length) {
        self.transferselectAllShow = true;
      } else {
        self.transferselectAllShow = false;
      }
    },
    // 右边选中删除
    righttransferPRListsClick(index) {
      var self = this;
      var leftPArr = [];
      var leftPSlectArr = [];
      self.transferPRLists[index].show = !self.transferPRLists[index].show;
      // 修改左边勾选状态
      self.transferPUserLLists.forEach(function(ele, ind) {
        if (ele.memberId == self.transferPRLists[index].memberId) {
          self.transferPUserLLists[ind].show = false;
        }
      });
      self.transferPRLists.splice(index, 1);
      self.transferPUserLLists.forEach(function(ele, ind) {
        if (ele.show == true) {
          leftPSlectArr.push(ele);
        }
      });
      if (leftPSlectArr.length == self.transferPUserLLists.length) {
        self.transferselectAllShow = true;
      } else {
        self.transferselectAllShow = false;
      }
    },
    ...mapActions(["getbookapibookselectdepttree", "getmembermemberquery"])
  },
  filters: {
    userNickFun: function(val) {
      if (val) {
        if (val.length > 1) {
          return val.slice(val.length - 1, val.length);
        } else {
          return val;
        }
      } else {
        return "";
      }
    }
  }
};
</script>
<style scoped>
.transferMlListLiRight {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-right: 11px;
  color: #333;
}

.transferMlListLiRight img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.trMlLiLiLeSlectTypeDept {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 200px;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  color: #333;
  margin-left: 5px;
  /* border: 1px solid red; */
}
.trMlLiLiLeSlectType img {
  width: 20px;
  height: 20px;
}

.trMlLiLiLeSlectType > div:nth-child(2) {
  max-width: 200px;
  margin-left: 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.trMlLiLiLeSlectTypeOne img {
  width: 100%;
  height: 100%;
}

.trMlLiLiLeSlectTypeOne div {
  position: absolute;
  top: 0;
  width: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  background-color: #38adff;
  color: #fff;
}

.trMlLiLiLeSlectTypeOne {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
}

.trMlLiLiLeSlectType {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin-left: 5px;
  color: #333;
}

.trMlLiLiLeSlect {
  height: 20px;
  width: 20px;
}

.trMlLiLiLeSlect > div {
  width: 20px;
  height: 20px;
}

.trMlLiLiLeSlect img {
  width: 20px;
  height: 20px;
}

.transferMlListLiLeft {
  min-width: 10px;
  display: flex;
  align-items: center;
  margin-left: 17px;
}

.transferMlListNullLi {
  width: 100%;
  width: 100%;
  height: 75px;
  line-height: 75px;
  margin-top: 3px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}

.transferMlListLi:hover {
  background-color: rgb(231, 234, 239);
}

.transferMlListLi {
  width: 100%;
  height: 35px;
  margin-top: 3px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

.transfer-ml-searchList {
  display: flex;
  height: 260px;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.transfer-ml-list ul {
  width: 100%;
}

.transfer-ml-list {
  display: flex;
  height: 200px;
  width: 100%;
  margin-top: 5px;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.transfer-ml-selectAllMain > div:nth-child(1) {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.transfer-ml-selectAllMain > div:nth-child(2) {
  font-size: 14px;
  margin-left: 7px;
  cursor: pointer;
}

.transfer-ml-selectAllMain > div img {
  width: 20px;
  height: 20px;
}

.transfer-ml-selectAllMain {
  width: 90%;
  display: flex;
  height: 20px;
  overflow: hidden;
  align-items: center;
}

.transfer-ml-selectAll {
  display: flex;
  height: 22px;
  width: 100%;
  overflow: hidden;
  justify-content: center;
  margin-top: 5px;
}

.breadMainLiBack {
  color: #38adff;
  width: 12px;
  height: 20px;
  cursor: pointer;
  margin-right: 5px;
}

.breadMainLi {
  display: flex;
  align-items: center;
  margin-right: 5px;
}

.breadMainLi > div:nth-child(1) {
  color: #38adff;
  font-size: 14px;
  max-width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.breadMainLi > div:nth-child(2) {
  font-size: 14px;
  color: #ccc;
  margin-left: 5px;
}

.breadMainSeleteLi > div:nth-child(1) {
  color: #333 !important;
}

.transfer-ml-breadMain ul {
  display: flex;
  height: 20px;
  width: 100%;
  overflow: hidden;
}

.transfer-ml-breadMain {
  width: 90%;
  display: flex;
  height: 20px;
  overflow: hidden;
}

.transfer-ml-bread {
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
}

.transfer-ml-search > div {
  width: 90%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 4px;
  background-color: #fff;
  overflow: hidden;
}

.transfer-ml-search input {
  font-size: 14px;
  border: 0px solid #ccc;
  min-height: 25px;
  border-radius: 5px;
  height: 32px;
  width: calc(100% - 10px);
  background-color: #fff;
}

.transfer-ml-search > div > div:nth-child(1) {
  width: 32px;
  display: flex;
  align-items: center;
  height: 32px;
  justify-content: center;
}

.transfer-ml-search > div > div:nth-child(2) {
  width: calc(100% - 55px);
}

.transfer-ml-search > div > div:nth-child(1) img {
  width: 15px;
  height: 15px;
}

.transfer-ml-search > div > div:nth-child(3) {
  width: 20px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transfer-ml-search > div > div:nth-child(3) img {
  width: 15px;
  height: 15px;
}

.transfer-ml-search {
  height: 37px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-top: 15px;
}

.transferPRLi {
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 5px;
  cursor: pointer;
}

.transferPRLi:hover {
  background-color: rgb(231, 234, 239);
}

.transferPRLi > div:nth-child(1) {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  margin-left: 15px;
}

.transferPRLi > div:nth-child(2) {
  font-size: 14px;
  color: #ccc;
  margin-left: 15px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  cursor: pointer;
  text-align: center;
  line-height: 18px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.transferPRLi > div:nth-child(1) > div {
  max-width: 200px;
  overflow: hidden;
  margin-left: 7px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.transferPRLi > div:nth-child(1) img {
  width: 25px;
  height: 25px;
}

.transfer-mainRight {
  overflow-x: hidden;
  overflow-y: scroll;
}

.transfer-main {
  width: 92%;
  height: 50px;
  font-size: 16px;
  color: #333;
  height: 350px;
  background-color: #f4f6f8;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.transfer-title {
  width: 92%;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  color: #333;
}

.transfer-left {
  width: 50%;
  height: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding-right: 15px;
}

.transfer-right {
  width: 50%;
  height: 420px;
  padding-left: 15px;
}

.up-content-main {
  height: 430px;
  width: 100%;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-around;
}

.up-content-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}

.up-content-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.up-content-title > div:nth-child(1) {
  margin-left: 15px;
}

.up-content-title > div:nth-child(2) {
  margin-right: 15px;
  font-size: 16px;
  color: #ccc;
  cursor: pointer;
}

.up-content-title {
  height: 50px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.updatePwd-content {
  width: 90%;
  max-width: 850px;
  min-width: 850px;
  height: 550px;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  margin-top: 70px;
}

.updatePwd {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}

.transferMlListNullLi {
  width: 100%;
  width: 100%;
  height: 75px;
  line-height: 75px;
  margin-top: 3px;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
}
</style>